<template>
  <div class='graph-info'>

    <el-card>
      <el-row>
        <span>模式:</span>
        <el-switch @change='viewModeChange' v-model='mode' active-text='2D' inactive-text='3D' />
      </el-row>
      <h3>图谱信息</h3>
      <el-row>
        <h4>节点数量:{{ nodes.length }}</h4>
      </el-row>
      <el-row>
        <h4>关系数量: {{ links.length }}</h4>
      </el-row>
      <el-row>
        <h4>平均度数: {{ gDensity }}</h4>
      </el-row>
      <el-row>
        <h4>图谱密度: {{ gDegree }}</h4>
      </el-row>
      <el-row>
        <h4>图谱稀疏度: {{ gSparsity }}</h4>
      </el-row>
      <el-row>
        <h2>图谱中节点信息</h2>
      </el-row>
      <el-tree :data='nodes' node-key='id' :expand-on-click-node='false'>
        <div class='custom-tree-node' slot-scope='{ node, data }'>
          <div style='display: flex;justify-content: space-between'>
            <span>{{ data.properties.name }}</span>
            <span>
              <el-link type='primary' @click='getNode(node.id)'>查看</el-link>
              <el-link style='margin-left: 5px ' type='danger'>删除</el-link>
            </span>
          </div>
        </div>
      </el-tree>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'GraphInfo',
  props: {
    nodes: {
      type: Array,
      required: true,
      default: 0
    },
    links: {
      type: Array,
      required: true,
      default: 0
    }
  },
  data(){
    return{
      mode: true
    }
  },
  computed: {
    gDensity() {
      return this.nodes.length <= 1 ? 0 : (this.links.length / (this.nodes.length * (this.nodes.length - 1))).toFixed(2);
    },
    gDegree() {
      return (this.links.length / this.nodes.length).toFixed(2);
    },
    // 企业实体的平均度数
    gMainDegree() {
    },
    // 稀疏度
    gSparsity() {
      return (this.links.length / (this.nodes.length * Math.log(this.nodes.length))).toFixed(2);
    }
  },
  methods: {
    getNode(id) {
      this.$emit('getNode', id);
    },
    viewModeChange(mode){
      if(mode){
        this.$router.push("/twodgraph")
      }else {
        this.$router.push("/threedgraph")
      }
    }
  }
};
</script>

<style scoped>
.graph-info {
  height: 100%;
}

.el-card {
  height: 100%;
}

.custom-tree-node {
  width: 100%;
}

.custom-tree-node {
}
</style>
